
import './App.css';
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
// import ImageModule from 'docxtemplater-image-module-free' //这句是导出图片用的
/*
上边这行代码不好使的情况下需要用var ImageModule = require('docxtemplater-image-module-free')
*/

function App() {
  // 定义导出 Word 文档的函数 下面添加导出 Word 文档的相关逻辑
  const exportWord = () => {
    console.log("1111");
    // 设置模板变量的值,这个就是模板里所插入的内容数据，根据需要写成动态就好了。
    var currentDate = new Date();
    var wordData = {
      name:'张三',
      birth:'1999/12/03',
      Gender:'男',
      Date:'2015',
      workers:'0119960005',
      education:'研究生',
      employment:'Employ',
      face:'党员',
      gaogao:'高管类',
      Professional :'正高',
      sj:currentDate.getFullYear().toString(),
      //images: DataUrl //图片导出功能
   };
  

   // 读取并获得模板文件的二进制内容，是docxtemplater提供的固定写法
   JSZipUtils.getBinaryContent("../人员年度考核表.docx", function (error, content) {
     console.log('content', content);  
     // 创建一个PizZip实例，内容为模板的内容
     let zip = new PizZip(content);
     console.log(zip, 'zip');   
     // 创建并加载docxtemplater实例对象
     let doc = new docxtemplater()
      
       .loadZip(zip)
       .compile();
     doc.resolveData(wordData).then(function () {
       console.log('ready');
       doc.render();
       var out = doc.getZip().generate({
         type: "blob",
         mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
       });
       // 将目标文件对象保存为目标类型的文件，并命名（起一个自己需要的名字就好了）
       saveAs(out, "人员年度考核表.docx");
     })
   });

  };
  return (
    <div className="App">
      <button type="info" onClick={exportWord} >导出word文档</button>
    </div>
  );
}

export default App;
